<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    ></pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    ></pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
  </list-page>
</template>

<script setup>
import { useTable } from '@/hooks/UseTable'
import { getLogLoginList } from '@/api/log.js'
import dayjs from 'dayjs'

const searchColumns = ref([
  {
    label: '操作时间',
    el: 'DateRange',
    bindBegin: 'startTime',
    bindEnd: 'endTime',
    defaultValue: ['', ''],
    labelWidth: 80,
    disabledDate: date => {
      return dayjs(date).isAfter(dayjs())
    }
  },
  {
    label: 'IP',
    el: 'Input',
    bind: 'ip',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '机构名称',
    el: 'Input',
    bind: 'orgName',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '登录账号',
    el: 'Input',
    bind: 'userAccount',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '真实名称',
    el: 'Input',
    bind: 'realName',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '登录类型',
    el: 'DictSelect',
    code: 'DLLX',
    bind: 'type',
    defaultValue: '',
    labelWidth: 80
  }
])
const columns = ref([
  { label: '操作人账号', prop: 'userAccount' },
  { label: '操作人姓名', prop: 'realName' },
  { label: '操作人机构名称', prop: 'orgName' },
  { label: '操作时间', prop: 'operateTime' },
  { label: '类型', prop: 'type', type: 'formatDict', formatCode: 'DLLX' },
  { label: '浏览器', prop: 'explore' },
  { label: 'IP', prop: 'ip' }
])

let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(getLogLoginList)

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
